<template>
    <div>
        <!-- costom  自定义 -->
        <div>
            <img
                style="width: 100%"
                src="http://www.gdmn88.com/upload/202006/1591168663.jpg"
                alt=""
            />
        </div>
        <div class="container">
            <div class="row">
                <div class="col-12 col-md-2">
                    <ul class="leftul">
                        <li
                            :class="{
                                select: index == $route.params.index,
                            }"
                            @click="
                                $router.replace({
                                    name: 'custom',
                                    params: {
                                        id: $route.params.id,
                                        index: index,
                                    },
                                })
                            "
                            v-for="(item, index) in list"
                            :key="index"
                        >
                            {{ item.title }}
                        </li>
                    </ul>
                </div>
                <div class="col-12 col-md-10">
                    <!-- {{ list[$route.params.index].item }} -->

                    <div
                        class="vhtml"
                        v-show="
                            list[$route.params.index]?.item[0].type == 1
                        "
                        v-html="
                            list[$route.params.index]?.item[0].content
                        "
                    ></div>
                    <div
                        v-show="
                            list[$route.params.index]?.item[0].type == 2
                        "
                    >
                        <div style="display: flex; flex-wrap: wrap">
                            <div
                                v-for="item in list[$route.params.index]
                                    ?.item"
                                :key="item.id"
                                :style="{order: item.sort}"
                            >
                                <card :item="item" />
                            </div>
                        </div>
                    </div>
                    <div>
                        <div v-if="$route.params.id == 2">
                            新闻列表
                            <newcard
                                :item="item"
                                v-for="(item, index) in list[
                                    $route.params.index
                                ]?.item[0]"
                                :key="index"
                            ></newcard>
                            <!-- {{ list[$route.params.index]?.item }} -->
                        </div>

                        <ul class="pagination justify-content-center">
                            <!-- disabled -->

                            <li
                                class="page-item"
                                :class="{disabled: page == 1}"
                            >
                                <!--  对象 -->
                                <router-link
                                    :to="{
                                        name: 'custom',
                                        params: $route.params,
                                        query: {page: page - 1},
                                    }"
                                    class="page-link"
                                    >上一页</router-link
                                >
                            </li>
                            <li
                                v-show="page == totalNum"
                                class="page-item"
                            >
                                <router-link
                                    :to="{
                                        name: 'custom',
                                        params: $route.params,
                                        query: {page: page - 2},
                                    }"
                                    class="page-link"
                                    href="#"
                                    >{{ page - 2 }}</router-link
                                >
                            </li>
                            <li v-show="page - 1 != 0" class="page-item">
                                <router-link
                                    :to="{
                                        name: 'custom',
                                        params: $route.params,
                                        query: {page: page - 1},
                                    }"
                                    class="page-link"
                                    href="#"
                                >
                                    {{ page - 1 }}</router-link
                                >
                            </li>
                            <li class="page-item">
                                <router-link
                                    :to="{
                                        name: 'custom',
                                        params: $route.params,
                                        query: {page: page},
                                    }"
                                    class="page-link active"
                                    href="#"
                                >
                                    {{ page }}
                                </router-link>
                            </li>
                            <li
                                v-show="page < totalNum"
                                class="page-item"
                            >
                                <router-link
                                    :to="{
                                        name: 'custom',
                                        params: $route.params,
                                        query: {page: page - 0 - 1},
                                    }"
                                    class="page-link"
                                    href="#"
                                    >{{ page - 0 + 1 }}</router-link
                                >
                            </li>
                            <li v-show="page - 1 == 0" class="page-item">
                                <router-link
                                    :to="{
                                        name: 'custom',
                                        params: $route.params,
                                        query: {page: page - 0 + 2},
                                    }"
                                    class="page-link"
                                    href="#"
                                    >{{ page - 0 + 2 }}</router-link
                                >
                            </li>
                            <!-- 添加禁用 class -->
                            <li
                                class="page-item"
                                :class="{disabled: page == totalNum}"
                            >
                                <router-link
                                    :to="{
                                        name: 'custom',
                                        params: $route.params,
                                        query: {page: page - 0 + 1},
                                    }"
                                    class="page-link"
                                    href="#"
                                    >下一页</router-link
                                >
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import card from "@/components/home/card.vue"
import newcard from "@/components/custom/newcard.vue"

export default {
    data() {
        return {
            list: [],
            num: 1,
            page: 1,
            totalNum: 1,
        }
    },
    async created() {
        this.page = this.$route.query.page || 1
        await this.init()
    },
    mounted() {
        console.log("过载后")
    },

    watch: {
        //  路由跳转如果是同页面 是没有刷新的 组件还是同个组件但是内容要发生变化
        //  一旦路由改变了 我们就重新发生请求渲染新的数据
        // $route: function (to, from) {
        //     console.log("改变了", to, from)
        //     if (to.name == "custom") {
        //         this.init()
        //     }
        // },
    },

    methods: {
        async init() {
            let {page = 1, pagesize = 10} = this.$route.query
            let {data} = await this.$fetch(
                "http://112.74.177.201:7001/api/getmodel",
                {
                    method: "post",
                    body: JSON.stringify({
                        id: this.$route.params.id,
                        page: page,
                        pageSize: pagesize,
                    }),
                }
            )

            this.list = data
            //  理清逻辑  独立开
            this.totalNum = Math.ceil(
                data[this.$route.params.index].item[1] /
                    (this.$route.query.pagesize || 10)
            )
            console.log("最大页", this.totalNum)
            console.log("获得数据了")
        },
    },
    components: {
        card,
        newcard,
    },
}
</script>

<style lang="scss" scoped>
.vhtml {
    overflow: hidden;
}
// scoped 给每个标签都自带一个属性 我们用选择器的时候也帮我们附加上了这个属性
//  h1{  }  =>   h1[abasldasdjkg]
// vue-style-loader  自带一个特性
// ::v-deep 深度选择器
::v-deep .vhtml img {
    width: 100%;
}
.leftul {
    padding: 0;
    .select {
        background-color: red;
        color: #fff;
    }
}
.leftul li {
    background-color: #66bd29;

    padding-left: 20px;
}
.leftul li:nth-child(1) {
    margin-bottom: 20px;
}
</style>
